<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo {
            white-space: nowrap;
        }

        .box {
            width: 200px;
            height: 20px;
            background-color: skyblue;
        }

        .ziti {

            font-weight: 600;
        }

        .wenben {
            /* 同一行显示 */
            white-space: nowrap;
            /* 将溢出部分隐藏 */
            overflow: hidden;
            /* 将末端文字变为省略号 */
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <h3>white-space:nowrap;和white-space:pre-wrap;</h3>
    <h4>white-spacnowrap使用：只保留一个空白，文本不会换行，会在在同一行上继续，直到遇到br标签为止。</h4>
    <i class="ziti">1.使用white-space:nowrap 属性后,p标签不会换行会在同一行显示</i>
    <p class="demo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum accusamus provident porro amet
        velit possimus fugiat consequuntur sequi ex minima error nam sunt, maiores sit rerum dolore cum fugit
        architecto.</p>
    <i class="ziti">2.不使用white-space:nowrap 属性后</i>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum accusamus provident porro amet
        velit possimus fugiat consequuntur sequi ex minima error nam sunt, maiores sit rerum dolore cum fugit
        architecto.</p>
    <i class="ziti">3.使用white-space:nowrap 属性后,与overflow 和text-overflow 做文本隐藏</i>
    <div class="box">
        <p class="wenben">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum accusamus provident porro amet
            velit possimus fugiat consequuntur sequi ex minima error nam sunt, maiores sit rerum dolore cum fugit
            architecto.</p>
    </div>
    <h4>white-space:pre-wrap保留空白符序列，正常地进行换行</h4>
    <i class="ziti">1.使用white-space:pre-wrap
        属性后,元素内的空格不管有多少个都会原样显示，如果有换行符，换行符后的内容会从下一行开始2.会自动换行，就是元素内容在一行中显示不完会从下一行开始</i>
    <p style="white-space: pre-wrap;">Lorem ipsum dolor sit amet cons ectetur adipisicing elit. Eum accusamus provident
        porro amet
        velit possimus fugiat consequuntur sequi ex minima error nam sunt, maiores sit <br> rerum dolore cum fugit
        architecto.</p>
    <hr>

    <h3>white-space:normal;和white-space:pre</h3>
    <i class="ziti">1.使用white-space:normals
        属性后,忽略多余的空白，元素内如果有多个空格在一起或换行符（回车键），浏览器会把其看作一个空格来处理，不会影响自动换行（就是元素内容过长，在一行上显示不完，会从下一行开始）</i>
    <p style="white-space: normal;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque labore totam in nemo
        facere magni iste corrupti
        et alias inventore, dicta cum expedita excepturi neque id impedit ex perspiciatis voluptatum?

    </p>
    <i class="ziti">2.使用white-space:pre 属性后,
        保留空白或换行符（回车键）。输入几个空格，浏览器显示的时候就是几个空格，其实就是原样输出，如果有换行符，换行符后的内容会从下一行开始。其行为方式和html中的pre标签类似。会影响自动换行（就是元素内容过长，不会从下一行开始，会冲出元素的边界显示）
    </i>
    <p style="white-space: pre;">Lorem ipsum dolor <br> amet consectetur adipisicing elit. Cumque labore totam in nemo
        facere magni iste corrupti</br>
        et alias inventore, dicta cum expedita excepturi neque id impedit ex perspiciatis voluptatum?
    </p>
    <hr>
    <h3>white-space:pre-line</h3>
    <i class="ziti">pre-line：合并空白符序列，保留换行符。就是多个空格会被浏览器看作一个空格来处理，如果有换行符（回车键），换行符后的内容会从下一行开始，不会影响自动换行。
    </i>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus exercitationem hic nihil odio deleniti
        consequatur consectetur cumque fuga nam vel fugiat saepe praesentium,<br> itaque eaque dolorem perferendis ipsa
        sequi commodi?</p>

    <h3>white-space:inherit</h3>
    <i class="ziti">inherit：从父元素继承white-space属性的值，就是父元素的white-space属性的值是什么，该元素的white-space属性值就是什么。</i>
    <div style="white-space: nowrap;">
        <p style="white-space: inherit;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione corrupti sequi laboriosam quidem nemo
            doloremque, incidunt animi quis culpa. Praesentium nobis saepe in dignissimos, provident facere eum
            assumenda adipisci voluptatum?</p>
    </div>
</body>

</html>